<template>
  <DefaultLayout
    :logo="logo"
    title="Skyline"
    :username="userStore.username"
    :collapse="userStore.collapse"
    :avatar="userStore.avatar"
    :systems="userStore.permissionSystems"
    :menus="userStore.permissionMenus"
    :tabs="userStore.tabs"
    :breadcrumbs="userStore.breadcrumbs"
    v-model:tab="userStore.tab"
    v-model:system="userStore.system"
    @logout="onLogout"
    @toggle="onToggle"
    @notification="onNotification"
  >
    <RouterView v-slot="{ Component, route }">
      <Transition
        enter-active-class="animate__animated animate__fadeIn animate__faster"
        leave-active-class="animate__animated animate__fadeOut animate__faster"
        appear
        mode="out-in"
      >
        <!-- <KeepAlive :include="kaIncludes"> -->
        <component :is="Component" :key="route.fullPath" />
        <!-- </KeepAlive> -->
      </Transition>
    </RouterView>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '@/components/layouts/DefaultLayout.vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import logo from '@/assets/images/logo.svg'
import { CommonSystemName } from '@/breadcrumb/breadcrumbs'

const userStore = useUserStore()
const router = useRouter()

const kaIncludes: string[] = []

const onLogout = () => {
  userStore.$reset()
  router.replace('/login')
}
const onToggle = () => {
  userStore.collapse = !userStore.collapse
}
const onNotification = () => {
  router.push(`${CommonSystemName}/notification`)
}

provide('remove-tab', (path: string) => {
  const activePath = userStore.removeTab(path)
  if (activePath) {
    router.push(activePath)
  }
})
</script>

<style scoped lang="scss"></style>
